<template>
  <view style="padding: 20rpx;">
    <view class="content" style="background-color: white;padding-top: 15rpx;">
      <!-- 轮播图部分 -->
      <view style="text-align: center;align-items: center;margin-top: 20rpx;">
        <image src="/static/4.png"></image>
      </view>

      <!-- 店铺信息 -->
      <view class="shop-info" style="padding-left: 40rpx;">
        <view>
          <view>
            <text style="margin-right: 210rpx;">小王汽车美容店</text>
          </view>
          <view style="display: flex; align-items: center;">
            <uni-rate v-model="rateValue" />
            <text style="margin-left: 20rpx;">3分</text>
            <text style="margin-left: 50rpx;">销量:322</text>
          </view>
          <view>营业时间: 周一至周五 09:00-22:00</view>
          <view style="display: flex;">
            <view>山阳区人民路32号</view>
            <image src="/static/plane@2x.png" style="width: 40rpx;height: 40rpx;margin-left: 30rpx;"></image>
          </view>
        </view>
      </view>

      <!-- Tab 切换 -->
      <view class="tabs">
        <view
          :class="['tab', activeTab ==='maintenance'? 'active' : '']"
          @click="switchTab('maintenance')"
        >
          保养
        </view>
        <view
          :class="['tab', activeTab === 'beauty'? 'active' : '']"
          @click="switchTab('beauty')"
        >
          美容
        </view>
        <view
          :class="['tab', activeTab ==='repair'? 'active' : '']"
          @click="switchTab('repair')"
        >
          维修
        </view>
      </view>

      <!-- 服务信息 -->
      <view class="service-info" style="margin-top: 20rpx;">
        <view class="service-title" style="margin-bottom: -20rpx;">服务项目</view>
        <view class="service-type">
          <!-- 保养服务 -->
          <view v-if="activeTab ==='maintenance'">
            <view class="maintenance-options">
              <view
                v-for="(service, index) in maintenanceServices"
                :key="index"
                class="service-option"
                @click="selectService(index)"
              >
                <view
                  :class="['service-dot', selectedService === index? 'active' : '']"
                ></view>
                <text>{{ service.name }}</text>
              </view>
            </view>
            <view class="price-info">
              <text class="current-price">¥ {{ getCurrentService().price }}</text>
              <text class="original-price">¥ {{ getCurrentService().originalPrice }}</text>
            </view>
            <view class="service-desc">
              服务介绍服务介绍服务介绍服务介绍服务介绍服务介绍服务介绍服务介绍服务介绍服务介绍
            </view>
            <button class="order-button" @click="handleBuy">抢购</button>
          </view>

          <!-- 美容服务 -->
          <view v-if="activeTab === 'beauty'">
            <view class="beauty-options">
              <view
                v-for="(service, index) in beautyServices"
                :key="index"
                class="beauty-option"
                @click="selectService(index)"
              >
                <view
                  class="service-dot"
                  :class="{ active: selectedService === index }"
                  @click="selectService(index)"
                ></view>
                <view class="service-text-content">
                  <view class="service-name-price">
                    <text
                      class="service-name"
                      :class="{ active: selectedService === index }"
                      @click="selectService(index)"
                    >
                      {{ service.name }}
                    </text>
                    <text class="service-price">{{ service.price }}</text>
                  </view>
                  <view class="service-option-desc">
                    <text>{{ service.desc }}</text>
                  </view>
                </view>
              </view>
            </view>
            <button class="order-button" @click="handleBuy">抢购</button>
          </view>

          <!-- 维修服务 -->
          <view v-if="activeTab ==='repair'">
            <view
              v-for="(service, index) in repairServices"
              :key="index"
              class="repair-option"
              @click="selectService(index)"
            >
              <view class="repair-name">{{ service.name }}</view>
              <view class="repair-price">
                <text class="current-price">{{ service.currentPrice }}</text>
                <text class="original-price">{{ service.originalPrice }}</text>
              </view>
            </view>
            <button class="order-button" @click="handleReservation">预约</button>
          </view>
        </view>
      </view>

      <!-- 评价部分 -->
      <view class="review-title">服务评价</view>
      <view class="review-item">
        <image src="../../static/6.png" class="avatar" />
        <view>
          <view class="review-header">
            <text>老李</text>
            <text class="review-date">2022-09-10</text>
          </view>
          <view>
            <uni-rate v-model="rateValue" />
            <view class="review-content">服务介绍服务介绍服务介绍服务介绍服务介绍服务介绍服务介绍服</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      shopId: '', // 店铺ID
      rateValue: 3,
      activeTab: 'maintenance',
      selectedService: 0, // 默认选中第一个服务
      // 保养服务
      maintenanceServices: [
        { id: 1, name: '普通洗车', price: 199, originalPrice: 299 },
        { id: 2, name: '精选', price: 299, originalPrice: 399 },
        { id: 3, name: '内饰精选', price: 399, originalPrice: 499 },
        { id: 4, name: '其他', price: 199, originalPrice: 299 }
      ],
      // 美容服务
      beautyServices: [
        {
          id: 5,
          name: '小保养套餐1（合成机油+过滤）',
          price: 199,
          originalPrice: 299,
          desc: '使用高品质合成机油，更换机油滤清器，为您的爱车提供全面保养。'
        },
        {
          id: 6,
          name: '小保养套餐2（合成机油+过滤）',
          price: 299,
          originalPrice: 399,
          desc: '升级款合成机油，更好的润滑性能，延长发动机使用寿命。'
        },
        {
          id: 7,
          name: '小保养套餐3（合成机油+过滤）',
          price: 399,
          originalPrice: 499,
          desc: '顶级合成机油，全方位保护发动机，提升动力性能。'
        }
      ],
      // 维修服务
      repairServices: [
        {
          id: 8,
          name: '工业价格（每小时）',
          currentPrice: 199,
          originalPrice: 299
        },
        {
          id: 9,
          name: '轮胎',
          currentPrice: 199,
          originalPrice: 299
        },
        {
          id: 10,
          name: '玻璃',
          currentPrice: 199,
          originalPrice: 299
        }
      ]
    };
  },
  onLoad(options) {
    // 获取传递过来的店铺ID
    if (options.id) {
      this.shopId = options.id;
      // 这里可以调用接口获取店铺详细信息
      this.fetchShopDetail();
    }
  },
  methods: {
    // 获取店铺详情
    async fetchShopDetail() {
      try {
        // const res = await api.getShopDetail(this.shopId);
        // 更新店铺信息
      } catch (error) {
        console.error('获取店铺详情失败:', error);
        uni.showToast({
          title: '获取店铺信息失败',
          icon: 'none'
        });
      }
    },

    // 切换 Tab
    switchTab(tab) {
      this.activeTab = tab;
      // 切换 Tab 时默认选中第一个服务
      this.selectedService = 0;
    },

    // 选择服务
    selectService(index) {
      this.selectedService = index;
    },

    // 获取当前选中的服务信息，添加默认返回第一个服务
    getCurrentService() {
      if (this.selectedService === null) {
        // 如果没有选中服务，返回当前 tab 的第一个服务
        switch (this.activeTab) {
          case 'maintenance':
            return this.maintenanceServices[0];
          case 'beauty':
            return this.beautyServices[0];
          case 'repair':
            return this.repairServices[0];
          default:
            return null;
        }
      }

      switch (this.activeTab) {
        case 'maintenance':
          return this.maintenanceServices[this.selectedService];
        case 'beauty':
          return this.beautyServices[this.selectedService];
        case 'repair':
          return this.repairServices[this.selectedService];
        default:
          return null;
      }
    },

    // 处理下单
    handleOrder(isRepair = false) {
      const service = this.getCurrentService();
      if (!service) {
        uni.showToast({
          title: '请选择服务项目',
          icon: 'none'
        });
        return;
      }

      // 如果是维修服务，跳转到预约页面
      if (isRepair) {
        const params = {
          shopId: this.shopId || 1,
          serviceId: service.id,
          serviceName: service.name,
          price: service.currentPrice,
          shopName: '小王汽车美容店', // 从页面数据中获取
          shopAddress: '山阳区人民路32号' // 从页面数据中获取
        };

        // 将参数转换为查询字符串
        const query = Object.entries(params)
          .map(([key, value]) => `${key}=${encodeURIComponent(value)}`)
          .join('&');

        // 跳转到预约页面
        uni.navigateTo({
          url: `/packagesMy/appointment/appointment?${query}`,
          fail: (err) => {
            console.error('跳转失败:', err);
            uni.showToast({
              title: '跳转失败',
              icon: 'none'
            });
          }
        });
        return;
      }

      // 其他服务跳转到保养订单页面
      const url = `/packagesUpkeep/BaoYangOrder/BaoYangOrder`;
      const params = {
        shopId: this.shopId || 1,
        serviceId: service.id,
        serviceType: this.activeTab,
        serviceName: service.name,
        price: service.price || service.currentPrice
      };

      const query = Object.entries(params)
        .map(([key, value]) => `${key}=${encodeURIComponent(value)}`)
        .join('&');

      uni.navigateTo({
        url: `${url}?${query}`,
        fail: (err) => {
          console.error('跳转失败:', err);
          uni.showToast({
            title: '跳转失败',
            icon: 'none'
          });
        }
      });
    },

    // 抢购按钮点击
    handleBuy() {
      this.handleOrder(false);
    },

    // 预约按钮点击
    handleReservation() {
      this.handleOrder(true);
    }
  }
};
</script>

<style lang="scss">
.tabs {
  display: flex;
  justify-content: space-around;
  margin-top: 20rpx;
  border-bottom: 1rpx solid #ccc;
}

.tab {
  padding: 10rpx 20rpx;
  cursor: pointer;
}

.tab.active {
  color: blue;
  border-bottom: 2rpx solid blue;
}

.service-info {
  padding: 0 40rpx;
  margin-top: 50rpx;
}

.service-title {
  color: black;
  font-weight: bold;
}

.service-type {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  margin-top: 50rpx;
}

/* 新增的保养选项容器样式 */
.maintenance-options {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.service-option {
  display: flex;
  align-items: center;
}

.service-dot {
  border: 1rpx solid black;
  height: 20rpx;
  width: 20rpx;
  border-radius: 50%;
  margin-right: 10rpx;
  cursor: pointer;
  transition: background-color 0.3s;
}

.service-dot.active {
  background-color: blue;
}

.beauty-options {
  display: flex;
  flex-direction: column; /* 修改为垂直排列 */
  gap: 10rpx; /* 增加选项之间的垂直间距 */
}

.beauty-option {
  display: flex;
  align-items: flex-start;
}

.repair-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.repair-name {
  font-size: 28rpx;
}

.repair-price {
  display: flex;
  align-items: center;
}

.current-price {
  color: black;
  font-weight: bold;
}

.original-price {
  color: red;
  text-decoration: line-through;
  margin-left: 10px;
}

.review-title {
  color: black;
  font-weight: bold;
  margin-left: 40rpx;
  height: 80rpx;
  line-height: 80rpx;
}

.review-item {
  padding: 20rpx;
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
  display: flex;
}

.avatar {
  margin-right: 10px;
  width: 140rpx;
  height: 100rpx;
  border-radius: 50%;
}

.review-header {
  margin-bottom: 10rpx;
}

.review-date {
  color: black;
  margin-left: 280rpx;
}

.order-button {
  background-color: #3082FB;
  color: white;
  border: none;
  padding: 10rpx 20rpx;
  border-radius: 5rpx;
  margin-top: 10rpx;
}
</style>